<template>
  <div class="form app-container">
    <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
      <el-tab-pane
        :key="item.name"
        v-for="(item, i) in editableTabs"
        :label="item.title"
        :name="item.name"
      >
        <components :is="components.length + 1 > Number(editableTabsValue) ? components[i] : components[1]"></components>
      </el-tab-pane>
    </el-tabs>
    <div class="step-main">
      <div class="up-down">
        <div class="down ud-btn" @click="moveTab('down')">down</div>
        <div class="up ud-btn" @click="moveTab('up')">up</div>
      </div>
    </div>
  </div>
</template>
 
<script>
import formA from './child/formBase'
import formSelectBox from './child/formSelectBox'
import formTime from './child/formTime'
export default {
  name: 'formPage',
  components: {
    formA,
    formSelectBox,
    formTime
  },
  data () {
    return {
      msg: 99,
      components: [
        'formA',
        'formSelectBox',
        'formTime'
      ],
      editableTabsValue: '1',
      editableTabs: [
        {
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }, 
        {title: 'Tab 2', name: '2', content: 'Tab 2 content'},
        {title: 'Tab 3', name: '3'},
        // {title: 'Tab 4', name: '4'},
        // {title: 'Tab 5', name: '5'},
        // {title: 'Tab 6', name: '6'},
        // {title: 'Tab 7', name: '7'},
        // {title: 'Tab ', name: ''},
      ],
      tabIndex: 0
    }
  },
  methods: {
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        this.tabIndex = this.tabIndex < this.editableTabs.length ? this.editableTabs.length : this.tabIndex 
        let newTabName = 1+this.tabIndex + '';
        // console.log(newTabName)
        this.editableTabs.push({
          title: `New Tab ${newTabName}`,
          name: newTabName,
          // content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      }
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    },
    moveTab(v) {
      if(v === 'up') {
        this.tabIndex = this.tabIndex < this.editableTabs.length-1 ? this.tabIndex+1 : this.tabIndex
      } else if(v === 'down') {
        this.tabIndex = this.tabIndex > 0 ? this.tabIndex-1 : this.tabIndex
      }
      console.log(this.tabIndex)
      this.editableTabsValue = this.editableTabs[this.tabIndex].name
    }
  },
  created() {
    this.msg = 0
  },
  beforeMount() {
    this.msg = 1
  },
  mounted() {
    this.msg = 2
  },
  // vue的 watch 在生命周期 dom渲染之前只监听最后次个变化
  watch: {
    msg(n) {
      console.log(n)
      if(n == 0) {
        this.msg = 'created'
      } else if(n == 1) {
        this.msg = 'beforeMount'
      } else if(n == 2) {
        this.msg = 'mounted'
      }
    }
  }
}
</script>
 
<style scoped lang="scss">
.form{
  // background: whitesmoke;
  .form-main{
    min-height: calc(100vh - 156px);
  }
  .step-main{
    // width: 100%;
    .up-down{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;
      .ud-btn{
        margin-right: 20px;
        width: 100px;
        text-align: center;
        line-height: 30px;
        // width: 100px;
        // height: 30px;
        cursor: pointer;
        background: #FFF;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
      }
    }
  }
}
  
</style>